<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>系统设置</BreadcrumbItem>
			<BreadcrumbItem>权限管理</BreadcrumbItem>
		</Breadcrumb>
		<Form>
			<FormItem>
				<Button @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
			</FormItem>
		</Form>

		<div class="form_box">
			<!-- 			<h3>{{name}} :</h3>
			<Form>
				<FormItem label="身份名称">
					<Input v-model="addformInline.title" placeholder="请输入身份名称" style="width: 200px" />
				</FormItem>
				<FormItem label="状态">
					<RadioGroup v-model="addformInline.status">
						<Radio label="1">启用</Radio>
						<Radio label="2">禁用</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="备注">
					<Input type="textarea" :rows="3" v-model="addformInline.remarks" placeholder="请输入备注"
						style="width: 200px" />
				</FormItem>
			</Form> -->
			<div style="display: flex; align-items: center;">
				<h3 style="margin-right: 20px;">权限设置</h3>
				<Checkbox label="all" @on-change="allchange">全选</Checkbox>
			</div>

<!-- 									<template v-if="data && data.length>0">
				<CheckboxGroup v-model="list">
					<div v-for="(item , index) in data" :key="index" class="outer">
						<div class="checkboxs">
							<Checkbox :label="item.id" border>{{item.title}}</Checkbox>
						</div>

						<div v-if="item.child && item.child.length != 0" class="subordinate">
							<div v-for="(item , index) in item.child" :key="index">
								<Checkbox class="checkbox" :label="item.id" border>{{item.title}}</Checkbox>
								<Checkbox v-for="(i , idx) in item.child" :key="idx" :label="i.id" class="check" border>
									{{i.title}}
								</Checkbox>
							</div>
						</div>

					</div>
				</CheckboxGroup>
			</template> -->

			<div class="outer" v-for="(items,key) in data" :key="key">
				<div class="checkboxs">
					<Checkbox class="outer" style="margin-bottom: 0;margin-top:10px" :indeterminate="items.indeterminate" :value="saveGroupList.indexOf(items.id)!=-1?true:false"
						@on-change="handleCheckAll($event,items,key)">{{items.title}}</Checkbox>
				</div>



				<div class="subordinate">
					<CheckboxGroup v-model="saveGroupList" :value="items.checked"
						@on-change="checkAllGroupChange($event, key)">
						<div style="display: flex; flex-flow: column; justify-content: flex-start;align-items: flex-start;">
							<Checkbox class="outer checkbox" style="display:inline-block;margin: 5px 0 ;"  v-for="(areaItem,index) in items.child" :key="index" :label="areaItem.id">
								{{areaItem.title}}
							</Checkbox>
						</div>
					</CheckboxGroup>
				</div>



			</div>





			<Button type="success" @click="submit" long>确定</Button>
		</div>


	</div>
</template>

<script>
	import autoCheck from "@/components/autoCheck"
	export default {
		components: {
			autoCheck
		},
		data() {
			return {
				saveGroupList: [],


				request: {
					role_id: null,
					rule_id: [],
				},
				data: [],
				list: [],
				name: "",
				allid: [],
				addformInline: {},
				allList: [],
			};
		},
		methods: {
			push_unique(id,key) {
				if (this.saveGroupList.indexOf(id) == -1) {
					this.saveGroupList.push(id);
				}

				for (var i = 0; i < this.data[key].child.length; i++) {
					var ele = this.data[key].child[i];

					console.log(ele)

					if (this.saveGroupList.indexOf(ele.id) == -1) {
						this.saveGroupList.push(ele.id);
					}
				}


				console.log(this.saveGroupList);

			},
			push_unique2(key) {



				for(var i = 0; i < this.data.length; i++){
					var ele = this.data[key];
					if (this.saveGroupList.indexOf(ele.id) != -1) {
						this.saveGroupList.splice(this.saveGroupList.indexOf(ele.id),1);
					}
				}


				for (var i = 0; i < this.data[key].child.length; i++) {
					var ele = this.data[key].child[i];
					if (this.saveGroupList.indexOf(ele.id) != -1) {
						this.saveGroupList.splice(this.saveGroupList.indexOf(ele.id),1);
					}
				}

				console.log(this.saveGroupList);

			},
			checkAllGroupChange($event, key) {
				console.log($event,key);
				// if ($event) {
				// 	console.log('ss',key.id)
				// 	this.push_unique(key.id)
				// }

			},
			handleCheckAll($event, items, key) {
				console.log($event, items, key)
				if ($event) {
					this.push_unique(this.data[key].id,key)
				}else{
					console.log(key)
					this.push_unique2(key)
				}
			},


			changeFun(e) {
				console.log(e)
				var arr = this.data;
				var arr2 = [];
				// for(var k =0,le=e.length;k<le;k++){}
				for (var i = 0, len = arr.length; i < len; i++) {

					if (e.indexOf(arr[i].id)) {
						console.log(arr[i])
						this.delSet(arr[i].id);
						if (arr[i].child && arr[i].child.length > 0) {
							for (var k = 0, le = arr[i].child.length; k < le; k++) {
								this.delSet(arr[i].child[k].id);
							}
						}
						break
					} else {
						this.addSet(arr[i].id)
					}
				}




			},
			addSet(id) {
				var arr = this.list;
				for (var i = 0, len = arr.length; i < len; i++) {
					if (arr[i] == id) {
						arr.push(id)
						// break
					}
				}

				console.log(arr)
			},
			delSet(id) {
				var arr = this.list;
				for (var i = 0, len = arr.length; i < len; i++) {
					if (arr[i] == id) {
						arr.splice(i, 1)
						// break
					}
				}

				console.log(arr)
			},


			allchange(e) {
				console.log(e)
				if (e) {
					this.list = this.allList;

				} else {
					this.list = [];
				}
			},
      //获取所有权限
			all() {

				this.axios.post("role/ruleList").then(res => {
					if (res.code == 1) {
						// this.data = res.data.list;
						var arr = res.data;
						var pidArr = []; //一级路由
						var arrList = [];
						this.data = arr;
						for (var i = 0, len = arr.length; i < len; i++) {
							arrList.push(arr[i].id)
							for (var k = 0, lk = arr[i].child.length; k < lk; k++) {
								arrList.push(arr[i].child[k].id)
							}

						}

						console.log(arrList);
						this.allList = arrList;
					}
				});

			},


     //根据角色获取权限
			getData() {
				// var id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id ;
				this.axios.post("role/getRoleRule", this.request).then(res => {
					if (res.code == 1) {

						var arr = res.data;
						// this.list = res.data;
						this.saveGroupList = res.data;

						console.log(this.list)
					}
				})

			},
      //角色设置权限
			submit() {
				let form = {
					rule_id: this.saveGroupList,
					role_id: this.request.role_id
				};
				console.log(form)

				// return

				this.axios.post("role/setRule", form).then(res => {
					if (res.code == 1) {
						this.$Message.success("提交成功！");
						this.$router.go(-1);
					}
				})
			}
		},
		created() {
			this.request.role_id = this.$route.query.id;
			this.name = this.$route.query.name;
			this.all();
			this.getData();
		}
	};
</script>

<style scoped>
	h3 {
		line-height: 50px;
	}

	.subordinate {
		margin: 10px 20px;
	}

	.checkbox {
		margin: 5px 10px;
		min-width: 200px;
	}

	.check {
		margin-top: 5px;
		margin-left: 30px;
		min-width: 160px;
	}

	.checkboxs {
		border-bottom: 1px solid silver;
		padding-bottom: 10px;
	}

	.outer {
		margin: 20px 0;
		/* padding: 10px; */
		padding: 4.5px 10px;
		border: 1px solid silver;
		border-radius: 5px;
	}
</style>
